'use strict';
exports = module.exports = function ($scope) {
    // Smil Animations
    // -----------------------------------
    // Let's put a sequence number aside so we can use it in the event callbacks
    $scope.smilData = {
        labels: [
            '2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06',
            '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12'
        ],
        series: [
            [2037, 9228, 7934, 504, 6202, 6077, 883, 3777, 9204, 4529, 7031, 9617],
            [391, 6398, 8127, 4319, 3176, 4201, 1424, 2673, 2027, 3821, 7409, 6067],
            [4344, 9633, 2324, 318, 8652, 7430, 2844, 8742, 9505, 5259, 8862, 4085],
            [4629, 6003, 4747, 9808, 367, 8485, 3876, 4608, 9834, 3452, 8044, 8218]
        ]
    };
    $scope.smilOptions = { low: 0, height: 260 };
    var seq = 0, delays = 80, durations = 500;
    $scope.smilEvents = {
        created: function() { seq = 0; },
        draw: function(data) {
            seq++;
            var axis = data.axis&&data.axis.units&&data.axis.units.pos;
            if(data.type === 'line') {
                // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
                data.element.animate({
                    opacity: { begin: seq * delays + 1000, dur: durations, from: 0, to: 1 }
                });
            } else if(data.type === 'label' && axis === 'x') {
                data.element.animate({
                    y: { begin: seq * delays, dur: durations, from: data.y + 100, to: data.y, easing: 'easeOutQuart' }
                });
            } else if(data.type === 'label' && axis === 'y') {
                data.element.animate({
                    x: { begin: seq * delays, dur: durations, from: data.x - 100, to: data.x, easing: 'easeOutQuart' }
                });
            } else if(data.type === 'point') {
                data.element.animate({
                    x1: { begin: seq * delays, dur: durations, from: data.x - 10, to: data.x, easing: 'easeOutQuart' },
                    x2: { begin: seq * delays, dur: durations, from: data.x - 10, to: data.x, easing: 'easeOutQuart' },
                    opacity: { begin: seq * delays, dur: durations, from: 0, to: 1, easing: 'easeOutQuart' }
                });
            } else if(data.type === 'grid') {
                // Using axis we get x or y which we can use to construct our animation definition objects
                var pos1Animation = { begin: seq * delays, dur: durations, from: data[axis + '1'] - 30, to: data[axis + '1'], easing: 'easeOutQuart' };
                var pos2Animation = { begin: seq * delays, dur: durations, from: data[axis + '2'] - 100, to: data[axis + '2'], easing: 'easeOutQuart' };
                var animations = {};
                animations[axis + 'x1'] = pos1Animation;
                animations[axis + 'x2'] = pos2Animation;
                animations['opacity'] = { begin: seq * delays, dur: durations, from: 0, to: 1, easing: 'easeOutQuart' };
                data.element.animate(animations);
            }
        }
    };
    ///////////////////////////////////////////////
    ///////////////////////////////////////////////
    ///////////////////////////////////////////////
    ///////////////////////////////////////////////
    // Line chart
    // -----------------------------------
    $scope.lineData = {
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ]
    };
    $scope.lineOptions = { fullWidth: true, height: 220, chartPadding: { right: 40 } };
    // Bar bipolar
    // -----------------------------------
    $scope.barBipolarOptions = {
        high: 10, low: -10, height: 220,
        axisX: { labelInterpolationFnc: function(value, index) { return index % 2 === 0 ? value : null; } }
    };
    $scope.barBipolarData = {
        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
        series: [ [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] ]
    };
    // Bar horizontal
    // -----------------------------------
    $scope.barHorizontalData = {
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        series: [ [5, 4, 3, 7, 5, 10, 3], [3, 2, 9, 5, 4, 6, 4] ]
    };
    $scope.barHorizontalOptions = { seriesBarDistance: 10, reverseData: true, horizontalBars: true, height: 220, axisY: { offset: 70 } };

    // SVG PATH animation
    // -----------------------------------
    $scope.pathData = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        series: [ [1, 5, 2, 5, 4, 3], [2, 3, 4, 8, 1, 2], [5, 4, 3, 2, 1, 0.5] ]
    };
    $scope.pathOptions = { low: 0, showArea: true, showPoint: false, fullWidth: true, height: 260 };
    $scope.pathEvents = {
    draw: function(data) {
        if(data.type === 'line' || data.type === 'area') {
            data.element.animate({
                d: { begin: 2000 * data.index, dur: 2000, from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(), to: data.path.clone().stringify() }
            });
            }
        }
    };
}
